<template>
    <div>
        <mt-header class="plain" fixed>
            <mt-button slot="left" icon="back" @click="goBack">返回</mt-button>
            <mt-button slot="right" @click="goBack">取消</mt-button>
        </mt-header>
        <div class="info-container">
            <div>
                <div class="info-result">{{resultText}}</div>
                <form action="javascript:;" ref="photoFileForm">
                    <input ref="photoFile" type="file" v-show="false" @change="handlePhotoFileChange" accept="image/*" capture="camera"/>
                </form>
            </div>
            <div class="info-button-group">
                <div class="x-row">
                    <div class="x-col-6 px-4">
                        <mt-button type="primary" class="info-button bg-light-gray">取消</mt-button>
                    </div>
                    <div class="x-col-6 px-4">
                        <mt-button type="primary" class="info-button" @click="verify">重新验证</mt-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            resultText: '未验证',
        }
    },

    mounted() {
        // console.log(this.$refs.photoFile)
        // setTimeout(() => {
        //     this.$refs.photoFile.click();
        // }, 100)
    },

    methods: {

        goBack() {
            this.$router.replace({path: '/exam/idverify', query: {courseId: this.$route.query.courseId}})
        },

        handlePhotoFileChange($event) {
            let file = this.$refs.photoFile.files[0]
            console.log(file)
            //实例化一个FileReader
            // let reader = new FileReader()

            // reader.onload = (e) => {
            //     //当reader加载时，把图片的内容赋值给
            //     // console.log(e.target.result)
            //     this.imgResult = e.target.result
            // }

            // reader.readAsDataURL(file)


        },

        verify() {
            this.$refs.photoFile.click()
        }
    }
}
</script>

<style lang="scss" scoped>
.info-container {
    margin-left: 16px;
    margin-right: 16px;
    margin-top: 55px;
    margin-bottom: 55px;

    .info-result {
        height: 400px;
        font-size: 32px;
    }

    .info-button-group {
        .info-button {
            width: 100%;
        }
    }
}
</style>
